<template>
	<view>
		<view class="page">
			<comp-common v-bind="{data:data}" @getUserInfo="getUserInfo" @myLogin="myLogin" @getPhoneNumber="getPhoneNumber" @hideGetCoupon="hideGetCoupon" @closeCouponBox="closeCouponBox" @navigatorClick="navigatorClick"></comp-common>
			<comp-header v-bind="{data:data}" @relevanceError="relevanceError" @relevanceSuccess="relevanceSuccess"></comp-header>
			<view class="body after-navber">
				<form @submit="booksubmit" reportSubmit="true">
            <view class="population">
                <view class="goods flex-row">
                    <view class="goods-img flex-grow-0">
                        <image :src="data.goods.cover_pic"></image>
                    </view>
                    <view class="flex-grow-1 flex-col goods-info">
                        <view class="flex-grow-1 goods-name">
                            {{data.goods.name}}
                        </view>
                        <view class="flex-grow-1 goods-name" v-for="(item,index) in data.attr" :key="item.id">
                            <view class="text-more-2" style="margin:5upx 0;-webkit-line-clamp: 1;">
                                <text>{{item['attr_group_name']}} :  </text>
                                <text style="color:#ff6845">{{item['attr_name']}}</text>
                            </view>
                        </view>
                        <view class="flex-gorw-0 flex-row money flex-y-bottom">
                            <view class="original_price flex-grow-0">
                                ¥{{data.goods.original_price}}
                            </view>
                            <view class="price flex-grow-0">
                                ¥{{data.level_price}}
                            </view>
                        </view>
                    </view>
                </view>
                <view class="form">
                    <view class="form-image">
                        <image :src="data.__wxapp_img.yy.form_title.url"></image>
                    </view>
                    <view class="group-form">
                        <block v-for="(item,index) in data.form_list" :key="item.id">
                            <view class="username flex-row input-shell flex-y-center" v-if="item.type=='text'">
                                <view class="flex-grow-0">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1">
                                    <input @input="inputChenge" :data-id="index" :placeholder="item.tip" :value="item.default"></input>
                                </view>
                            </view>
                            <view class="group-radio flex-row input-shell flex-y-center" v-if="item.type=='radio'">
                                <view class="flex-grow-0">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1" style="padding-top:24upx;">
                                    <view @tap="radioChange" :class="['checkbox group-radio-item', de.selected?'active':'', 'flex-y-center']" :data-id="idx" :data-pid="index" v-for="(de,idx) in item.default" :key="de.id">
                                        <checkbox :checked="item.selected" data-id="0" style="display:none" :value="de.name"></checkbox>{{de.name}}
                                            </view>
                                </view>
                            </view>
                            <view class="group-radio flex-row input-shell flex-y-center" v-if="item.type=='checkbox'">
                                <view class="flex-grow-0">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1" style="padding-top:24upx;">
                                    <view @tap="checkboxChange" :class="['checkbox group-radio-item', de.selected?'active':'', 'flex-y-center']" :data-id="idx" :data-pid="index" v-for="(de,idx) in item.default" :key="de.id">
                                        <checkbox :checked="item.selected" data-id="0" style="display:none" :value="de.name"></checkbox>{{de.name}}
                                            </view>
                                </view>
                            </view>
                            <view class="username flex-row input-shell flex-y-center" v-if="item.type=='time'">
                                <view class="flex-grow-0">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1 flex-row picker-data flex-y-center">
                                    <picker @change="inputChenge" class="flex-grow-0" :data-id="index" mode="time" :start="item.default" style="padding-right:20upx;" :value="item.default">
                                        <view class="picker flex-y-center">
                                                {{item.default}}
                                            </view>
                                    </picker>
                                    <view class="flex-grow-0 picker-time flex-y-center">
                                        <image :src="data.__wxapp_img.share.right.url"></image>
                                    </view>
                                </view>
                            </view>
                            <view class="username flex-row input-shell flex-y-center" v-if="item.type=='date'">
                                <view class="flex-grow-0">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1 flex-row picker-data flex-y-center">
                                    <picker @change="inputChenge" class="flex-grow-0" :data-id="index" mode="date" :start="item.default" style="padding-right:20upx;" :value="item.default" v-if="data.is_date_start">
                                        <view class="picker flex-y-center">
                                                {{item.default}}
                                            </view>
                                    </picker>
                                    <picker @change="inputChenge" class="flex-grow-0" :data-id="index" mode="date" style="padding-right:20upx;" :value="item.default" v-else>
                                        <view class="picker flex-y-center">
                                                {{item.default}}
                                            </view>
                                    </picker>
                                    <view class="flex-grow-0 picker-time flex-y-center">
                                        <image :src="data.__wxapp_img.share.right.url"></image>
                                    </view>
                                </view>
                            </view>
                            <view class="username flex-row input-shell flex-y-top" style="padding:24upx 0;" v-if="item.type=='textarea'">
                                <view class="flex-grow-0 flex-y-top">
                                        {{item.name}}：
                                    </view>
                                <view class="flex-grow-1 flex-row flex-y-center">
                                    <textarea @input="inputChenge" :data-id="index" :placeholder="item.tip" :value="item.default"></textarea>
                                </view>
                            </view>
                            <view class="username flex-row input-shell flex-y-center" style="padding:20upx 0;" v-if="item.type=='uploadImg'">
                                <view class="flex-grow-0 flex-y-center">{{item.name}}：</view>
                                <view @tap="uploadImg" class="flex-grow-1 flex-y-center" :data-id="index">
                                    <input data-id="100" style="display:none" :value="item.default"></input>
                                    <view style="text-align: right;width: 100%;font-size: 0" v-if="item.default">
                                        <image mode="aspectFit" :src="item.default" style="width:88upx;"></image>
                                    </view>
                                    <view style="text-align:right;color:#c9c9c9;width:100%" v-else>{{item.tip?item.tip:'请选择图片'}}</view>
                                </view>
                                <view class="flex-grow-0 flex-y-center">
                                    <image :src="data.__wxapp_img.balance.right.url" style="width:12upx;height:18upx;margin-left:18upx;"></image>
                                </view>
                            </view>
                        </block>
                        <view class="group-radio flex-row input-shell flex-y-center">
                            <view class="flex-grow-0">
                                支付方式：
                            </view>
                            <view class="flex-grow-1" style="padding-top:24upx;">
                                <view @tap="switchType" :class="['checkbox group-radio-item', data.pay_type=='WECHAT_PAY'?'active':'', 'flex-y-cente']" data-type="WECHAT_PAY" v-if="data.wechat">
                                    线上支付
                                </view>
                                <view @tap="switchType" :class="['checkbox group-radio-item', data.pay_type=='BALANCE_PAY'?'active':'', 'flex-y-cente']" data-type="BALANCE_PAY" v-if="data.balance">
                                    余额支付
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
            <button class="submit-btn flex-row flex-y-center flex-x-center" formType="submit">
                提交预约
            </button>
        </form>
			</view>
			<comp-footer v-bind="{data:data}"></comp-footer>
		</view>
	</view>
</template>

<script>var myVue = {};
	var t = require("../../../utils/helper.js");
	export default {
		data() {
			return {
				data: {
        is_date_start: !0
    },
			};
		},
		onLoad: function(t) {myVue = this;
        myVue.getApp.page.onLoad(this, t), this.getPreview(t);
    },
    onReady: function(t) {
        myVue.getApp.page.onReady(this);
    },
    onShow: function(t) {
        myVue.getApp.page.onShow(this);
    },
    onHide: function(t) {
        myVue.getApp.page.onHide(this);
    },
    onUnload: function(t) {
        myVue.getApp.page.onUnload(this);
    },
    onPullDownRefresh: function(t) {
        myVue.getApp.page.onPullDownRefresh(this);
    },
    onReachBottom: function(t) {
        myVue.getApp.page.onReachBottom(this);
    },
		methods: {
			checkboxChange: function(t) {
        var e = this, a = t.target.dataset.pid, o = t.target.dataset.id, i = e.data.form_list, s = i[a].default[o].selected;
        i[a].default[o].selected = 1 != s, e.setData({
            form_list: i
        });
    },
    radioChange: function(t) {
        var e = this, a = t.target.dataset.pid, o = e.data.form_list;
        for (var i in o[a].default) t.target.dataset.id == i ? o[a].default[i].selected = !0 : o[a].default[i].selected = !1;
        e.setData({
            form_list: o
        });
    },
    inputChenge: function(t) {
        var e = this, a = t.target.dataset.id, o = e.data.form_list;
        o[a].default = t.detail.value, e.setData({
            form_list: o
        });
    },
    getPreview: function(e) {
        var a = this, o = JSON.parse(e.goods_info)[0];
        a.setData({
            attr: o.attr
        });
        var i = o.id;
        myVue.getApp.core.showLoading({
            title: "正在加载",
            mask: !0
        });
        var s = JSON.stringify(o.attr);
        myVue.getApp.request({
            url: myVue.getApp.api.book.submit_preview,
            method: "get",
            data: {
                gid: i,
                attr: s
            },
            success: function(e) {
                if (0 == e.code) {
                    for (var o in e.data.form_list) "date" == e.data.form_list[o].type && (e.data.form_list[o].default || (e.data.form_list[o].default = t.formatData(new Date()), 
                    a.setData({
                        is_date_start: !1
                    }))), "time" == e.data.form_list[o].type && (e.data.form_list[o].default = e.data.form_list[o].default ? e.data.form_list[o].default : "00:00");
                    var i = e.data.option;
                    i ? (1 == i.balance && (a.setData({
                        balance: !0,
                        pay_type: "BALANCE_PAY"
                    }), a.getApp.request({
                        url: a.getApp.api.user.index,
                        success: function(t) {
                            0 == t.code && a.getApp.core.setStorageSync(a.getApp.const.USER_INFO, t.data.user_info);
                        }
                    })), 1 == i.wechat && a.setData({
                        wechat: !0,
                        pay_type: "WECHAT_PAY"
                    })) : a.setData({
                        wechat: !0,
                        pay_type: "WECHAT_PAY"
                    }), a.setData({
                        goods: e.data.goods,
                        form_list: e.data.form_list,
                        level_price: e.data.level_price
                    });
                } else a.getApp.core.showModal({
                    title: "提示",
                    content: e.msg,
                    showCancel: !1,
                    success: function(t) {
                        t.confirm && a.getApp.core.redirectTo({
                            url: "/pages/book/index/index"
                        });
                    }
                });
            },
            complete: function(t) {
                setTimeout(function() {
                    a.getApp.core.hideLoading();
                }, 1e3);
            }
        });
    },
    booksubmit: function(t) {
        var e = this, a = e.data.pay_type;
        if (0 != e.data.goods.price) {
            if ("BALANCE_PAY" == a) {
                var o = myVue.getApp.core.getStorageSync(myVue.getApp.const.USER_INFO);
                myVue.getApp.core.showModal({
                    title: "当前账户余额：" + o.money,
                    content: "是否使用余额",
                    success: function(a) {
                        a.confirm && e.submit(t);
                    }
                });
            }
            "WECHAT_PAY" == a && e.submit(t);
        } else e.submit(t);
    },
    submit: function(t) {
        var e = t.detail.formId, a = this, o = a.data.goods.id, i = JSON.stringify(a.data.attr), s = JSON.stringify(a.data.form_list), r = a.data.pay_type;
        myVue.getApp.core.showLoading({
            title: "正在提交",
            mask: !0
        }), myVue.getApp.request({
            url: myVue.getApp.api.book.submit,
            method: "post",
            data: {
                gid: o,
                form_list: s,
                form_id: e,
                pay_type: r,
                attr: i
            },
            success: function(t) {
                if (0 == t.code) {
                    if (1 != t.type) return a.getApp.core.showLoading({
                        title: "正在提交",
                        mask: !0
                    }), void a.getApp.core.requestPayment({
                        _res: t,
                        timeStamp: t.data.timeStamp,
                        nonceStr: t.data.nonceStr,
                        package: t.data.package,
                        signType: t.data.signType,
                        paySign: t.data.paySign,
                        success: function(t) {
                            a.getApp.core.redirectTo({
                                url: "/pages/book/order/order?status=1"
                            });
                        },
                        fail: function(t) {},
                        complete: function(t) {
                            setTimeout(function() {
                                a.getApp.core.hideLoading();
                            }, 1e3), "requestPayment:fail" != t.errMsg && "requestPayment:fail cancel" != t.errMsg ? "requestPayment:ok" != t.errMsg && a.getApp.core.redirectTo({
                                url: "/pages/book/order/order?status=-1"
                            }) : a.getApp.core.showModal({
                                title: "提示",
                                content: "订单尚未支付",
                                showCancel: !1,
                                confirmText: "确认",
                                success: function(t) {
                                    t.confirm && a.getApp.core.redirectTo({
                                        url: "/pages/book/order/order?status=0"
                                    });
                                }
                            });
                        }
                    });
                    a.getApp.core.redirectTo({
                        url: "/pages/book/order/order?status=1"
                    });
                } else a.getApp.core.showModal({
                    title: "提示",
                    content: t.msg,
                    showCancel: !1,
                    success: function(t) {}
                });
            },
            complete: function(t) {
                setTimeout(function() {
                    a.getApp.core.hideLoading();
                }, 1e3);
            }
        });
    },
    switchType: function(t) {
        this.setData({
            pay_type: t.currentTarget.dataset.type
        });
    },
    uploadImg: function(t) {
        var e = this, a = t.currentTarget.dataset.id, o = e.data.form_list;
        myVue.getApp.uploader.upload({
            start: function() {
                myVue.getApp.core.showLoading({
                    title: "正在上传",
                    mask: !0
                });
            },
            success: function(t) {
                0 == t.code ? (o[a].default = t.data.url, e.setData({
                    form_list: o
                })) : e.showToast({
                    title: t.msg
                });
            },
            error: function(t) {
                e.showToast({
                    title: t
                });
            },
            complete: function() {
                myVue.getApp.core.hideLoading();
            }
        });
    }
		},
	}
</script>

<style scoped>
.population {
    padding: 20upx 24upx 120upx 24upx;
}

.goods {
    margin-bottom: 20upx;
    background-color: #fff;
    padding: 24upx;
    border-radius: 16upx;
    box-shadow: 0px 0px 10px #dddddd;
}

.goods-img {
    margin-right: 24upx;
}

.goods-img image {
    width: 208upx;
    height: 208upx;
}

.goods-info {
    margin: 8upx 0;
}

.goods-name {
    font-size: 11pt;
    color: #353535;
}

.original_price {
    font-size: 10pt;
    color: #a4a4a4;
    text-decoration: line-through;
    margin-right: 40upx;
}

.price {
    color: #ff4544;
    font-size: 12pt;
}

.money {
    justify-content: flex-end;
}

.form {
    background-color: #fff;
    border-radius: 16upx;
    box-shadow: 0px 0px 10px #dddddd;
}

.form image {
    width: 702upx;
    height: 96upx;
}

.group-form {
    padding: 0 24upx;
    font-size: 12pt;
    color: #353535;
}

.input-shell {
    min-height: 96upx;
    border-bottom: 1upx solid #e2e2e2;
}

.picker-time image {
    width: 16upx;
    height: 26upx;
}

.picker-data {
    justify-content: flex-end;
}

.group-radio-item {
    color: #666666;
    line-height: 56upx;
    border-radius: 28upx;
    border: 1upx solid #cccccc;
    padding: 0 24upx;
    display: inline-block;
    margin-bottom: 24upx;
    margin-right: 24upx;
}

.active.group-radio-item {
    background-color: #ff6845;
    color: #fff;
}

.input-shell textarea {
    height: 120upx;
}

.submit-btn {
    height: 100upx;
    background-color: #ff4544;
    font-size: 13pt;
    color: #ffffff;
    position: fixed;
    bottom: var(--window-bottom);
    left: 0;
    width: 100%;
    border-radius: 0;
}

button::after {
    content: normal;
    border: 0;
}
</style>
